---
import { cn } from '~/lib/utils'

interface Props {
  type: 'tag' | 'recommend'
  content: string
  class?: string
  variant?: 'default' | 'gradient' | 'subtle' | 'outline'
  size?: 'sm' | 'md'
  showIcon?: boolean
}

const { type, content, class: className, variant = 'default', size = 'sm', showIcon = true }: Props = Astro.props

const sizeClasses = {
  sm: 'text-xs px-2 py-0.5 gap-1',
  md: 'text-sm px-3 py-1.5 gap-1.5',
}

const variantClasses = {
  default: 'bg-muted/40 text-muted-foreground hover:bg-muted/60 hover:text-foreground border border-transparent',
  gradient:
    'border border-transparent bg-gradient-to-r from-slate-500/15 via-blue-500/15 to-indigo-500/15 text-slate-700 dark:text-slate-300 hover:from-slate-500/25 hover:via-blue-500/25 hover:to-indigo-500/25',
  subtle: 'bg-primary/10 text-primary hover:bg-primary/20 border border-transparent',
  outline: 'bg-muted/30 text-muted-foreground border border-border hover:bg-muted/50 hover:text-foreground',
}

// 根据类型设置默认variant
const defaultVariant = type === 'recommend' ? 'gradient' : 'default'
const finalVariant = variant === 'default' ? defaultVariant : variant

// 图标配置
const iconConfig = {
  tag: 'icon-[heroicons--hashtag-16-solid]',
  recommend: 'icon-[garden--sparkle-fill-16] ',
}

const iconClass = iconConfig[type]
---

{
  type === 'tag' ? (
    <a
      href={`/tags/${content}`}
      aria-label={`View posts tagged with ${content}`}
      class={cn(
        'inline-flex items-center font-medium  transition-colors duration-200 select-none',
        sizeClasses[size],
        variantClasses[finalVariant],
        className
      )}
    >
      {showIcon && <span class={iconClass} />}
      {content}
    </a>
  ) : (
    <span
      class={cn(
        'inline-flex items-center font-medium transition-colors duration-200 select-none',
        sizeClasses[size],
        variantClasses[finalVariant],
        className
      )}
      title="Recommended post"
    >
      {showIcon && <span class={iconClass} />}
      <span class="font-semibold tracking-wide">{content}</span>
    </span>
  )
}
